﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>智行视障路：视觉模型 AI 辅镜监控平台</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/china.js"></script>
    <script type="text/javascript" src="js/map.js"></script>
    <script type="text/javascript" src="js/js.js"></script>
    <script type="text/javascript" src="js/Bubble.js"></script>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="head clearfix">
        <h1 class="pulll_left">智行视障路：视觉模型 AI 辅镜监控平台</h1>
        <div class="time" id="showTime">2025/1/1 12:00:00</div>
        <script>
            var t = null;
            t = setTimeout(time, 1000);
            function time() {
                clearTimeout(t);
                dt = new Date();
                var y = dt.getFullYear();
                var mt = dt.getMonth() + 1;
                var day = dt.getDate();
                var h = dt.getHours();
                var m = dt.getMinutes();
                var s = dt.getSeconds();
                document.getElementById("showTime").innerHTML = y + "/" + mt + "/" + day + " " + h + ":" + m + ":" + s + "";
                t = setTimeout(time, 1000);
            }
        </script>
    </div>

    <div class="mainbox">
        <ul class="clearfix nav1">
            <li style="width: 22%">
                <div class="box">
                    <div class="tit">视障人群分布与项目推广区域</div>
                    <div class="boxnav" style="height: 200px;">
                        <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tbody>
                                <tr>
                                    <th>地区</th>
                                    <th>计划覆盖</th>
                                    <th>实际覆盖</th>
                                    <th>覆盖率</th>
                                </tr>
                                <tr>
                                    <td>华东</td>
                                    <td><span class="text-w">500万</span></td>
                                    <td><span class="text-b">420万</span></td>
                                    <td><div class="text-d">84%</div></td>
                                </tr>
                                <tr>
                                    <td>华北</td>
                                    <td><span class="text-w">300万</span></td>
                                    <td><span class="text-b">250万</span></td>
                                    <td><div class="text-s">83%</div></td>
                                </tr>
                                <tr>
                                    <td>华南</td>
                                    <td><span class="text-w">400万</span></td>
                                    <td><span class="text-b">360万</span></td>
                                    <td><div class="text-d">90%</div></td>
                                </tr>
                                <tr>
                                    <td>西南</td>
                                    <td><span class="text-w">200万</span></td>
                                    <td><span class="text-b">180万</span></td>
                                    <td><div class="text-s">90%</div></td>
                                </tr>
                                <tr>
                                    <td>东北</td>
                                    <td><span class="text-w">100万</span></td>
                                    <td><span class="text-b">80万</span></td>
                                    <td><div class="text-d">80%</div></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="box">
                    <div class="tit">设备性能指标</div>
                    <div class="boxnav" style="height: 250px;">
                        <div style="height: 190px" id="echart1"></div>
                        <div class="leidanav">
                            <ul class="clearfix">
                                <li><span>场景识别准确率</span><p>97%</p></li>
                                <li><span>物体检测准确率</span><p>96%</p></li>
                                <li><span>响应时间</span><p>≤0.8s</p></li>
                                <li><span>续航时间</span><p>≥6h</p></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </li>
            <li style="width: 56%">
                <div class="box">
                    <div class="boxnav mapc" style="height: 550px; position: relative">
                        <div class="mapnav">
                            <ul>
                                <li><div><span>在线设备数</span><p>128</p></div></li>
                                <li><div><span>用户活跃度</span><p>85%</p></div></li>
                                <li><div><span>识别成功率</span><p>96%</p></div></li>
                                <li><div><span>交互响应率</span><p>95%</p></div></li>
                                <li><div><span>设备覆盖率</span><p>65%</p></div></li>
                            </ul>
                        </div>
                        <div class="mapnav2">
                            <div class="box">
                                <div class="tit">实时数据监控</div>
                                <div class="boxnav" style="height: 130px;" id="sysx"></div>
                                <div class="leidanav leidanav3" style="margin-bottom: 15px;">
                                    <ul class="clearfix">
                                        <li><span>设备在线数</span><p>128</p></li>
                                        <li><span>用户活跃度</span><p>85%</p></li>
                                        <li><span>识别成功率</span><p>96%</p></li>
                                        <li><span>交互响应率</span><p>95%</p></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="map" id="map"></div>
                        <script>
                            $(".mapbtn a").hover(function(){
                                var ind=$(this).index()
                                $(".mapnav ul").eq(ind).show().siblings().hide()
                            })
                        </script>
                    </div>
                </div>
            </li>
            <li style="width: 22%">
                <div class="box">
                    <div class="tit">用户满意度与市场分析</div>
                    <div class="boxnav" id="echart3" style="height: 200px;"></div>
                </div>
                <div class="box">
                    <div class="tit">热门功能与关键词</div>
                    <div class="boxnav" style="height: 250px;">
                        <div style="height: 200px; float: left; width: 40%; padding: 0 5px;">
                            <div class="tit02 text-b">热门功能排行</div>
                            <div class="huati">
                                <ul>
                                    <li>1.场景识别  <span class="text-s">↑2167</span></li>
                                    <li>2.物体检测  <span class="text-s">↑2167</span></li>
                                    <li>3.语音交互  <span class="text-d">↓2167</span></li>
                                    <li>4.导航辅助  <span class="text-d">↓2167</span></li>
                                    <li>5.实时反馈  <span class="text-d">↓2167</span></li>
                                </ul>
                            </div>
                        </div>
                        <div style="height: 200px; float: left; width: 60%">
                            <div class="text-b tit02" style="text-align: center;">关键词 — AI 辅镜</div>
                            <div class="tagcloud">
                                <a class="b01 co01">场景识别</a>
                                <a class="b02 co02">物体检测</a>
                                <a class="b03 co05">语音交互</a>
                                <a class="b04 co02">导航辅助</a>
                                <a class="b03 co05">实时反馈</a>
                            </div>
                            <script type="text/javascript">
                                tagcloud({
                                    selector: ".tagcloud",
                                    fontsize: 6,
                                    radius: 40,
                                    mspeed: "slow",
                                    ispeed: "slow",
                                    direction: 0,
                                    keep: false
                                });
                            </script>
                        </div>
                    </div>
                </div>
            </li>
        </ul>

        <div class="box" style="padding: 20px 0;">
            <ul class="clearfix nav2">
                <li style="width:25%">
                    <div class="tit01">用户分布</div>
                    <div class="" id="">
                        <div style="float: left; width: 50%; height: 170px" id="fb01"></div>
                        <div style="float: left; width: 50%; height: 170px" id="fb02"></div>
                        <div class="leidanav leidanav2">
                            <ul class="clearfix">
                                <li><span>总用户数</span><p>128</p></li>
                                <li><span>男性用户</span><p>100</p></li>
                                <li><span>女性用户</span><p>28</p></li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li style="width:25%">
                    <div class="tit01">使用时长</div>
                    <div class="ftechart" id="echart4"></div>
                </li>
                <li style="width:25%">
                    <div class="tit01">任务完成情况</div>
                    <div class="" style="height:100%;display: flex; align-items: center;">
                        <div style="float: left; width: 50%; height: 100%" class="wancheng">
                            <div><span>已完成任务</span>
                            <h3>1835<i>个</i></h3></div>
                            <div class="yuan">
                            <span>19%</span>
                            </div>
                        </div>
                        <div style="float: left; width: 50%; height: 50%" id="myd1"></div>
                    </div>
                </li>
                <li style="width:25%">
                    <div class="tit01">设备状态</div>
                    <div class="" id="">
                        <div style="float: left; width: 50%; height: 200px" id="fb03"></div>
                        <div style="float: left; width: 50%; height: 200px" id="fb04"></div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>